<template>
  <div class="graph">
    <div class="title">算力调度网</div>
    <div id="tooltipText" class="tooltiptext"></div>
    <div id="graph" style="width:100%;height:100%;">
    </div>
  </div>
</template>

<script>
  import { Graph, Shape } from '@antv/x6'
  // import { History } from '@antv/x6-plugin-history'
  // import { Keyboard } from '@antv/x6-plugin-keyboard'
  import imageTop from './images/img_topology_top.svg'
  import imageLeft from './images/img_topology_left.svg'
  import imageRight from './images/img_topology_right.svg'
  import imgInternet from './images/img_internet.svg'
  // import { register } from '@antv/x6-vue-shape'

  export default {
    data () {
      return {
        nodeList: [
          {
            name: '长沙超算中心',
            img: imageTop,
            x: 400,
            y: 440
          },
          {
            name: '长沙大数据中心',
            img: imageLeft,
            x: 100,
            y: 700
          },
          {
            name: '证通云谷数据中心',
            img: imageRight,
            x: 800,
            y: 700
          },
          {
            name: '湘潭大数据中心',
            img: imageTop,
            x: 400,
            y: 40
          }
        ]
      }
    },
    mounted () {
      let offsetWidth = document.getElementById('graph').offsetWidth
      this.nodeList[3].x = this.nodeList[0].x = (offsetWidth - 200) / 2
      this.nodeList[2].x = offsetWidth - 300

      const graph = new Graph({
        container: document.getElementById('graph'),
        translating: {
          restrict: false
        },
        // width: offsetWidth - 100
        autoResize: true,
        keyboard: true,
        history: true,
        scaling: { min: 0.05, max: 3 },
        mousewheel: true,
        background: {
          color: '#ffffff'
        },
        grid: {
          size: 20,
          visible: true,
          type: 'doubleMesh',
          args: [
            {
              color: '#D8D8D9' // 次网格线颜色
            }
          ]
        },
        panning: true,
        interacting: {
          nodeMovable: false //  节点是否可以被移动
        }
      })
      // graph.use(
      //   new History({
      //     enabled: true
      //   })
      // )

      // graph.use(
      //   new Keyboard({
      //     enabled: true
      //   })
      // )

      // graph.bindKey('ctrl+z', () => {
      //   graph.undo()
      //   return false
      // })

      //   Shape.HTML.register({
      //     shape: 'title',
      //     width: 160,
      //     height: 80,
      //     html () {
      //       const div = document.createElement('div')
      //       div.innerHTML = '算力调度网'
      //       div.className = 'title'
      //       return div
      //     }
      //   })
      //   // 添加title
      //   graph.addNode({
      //     shape: 'title',
      //     x: 20,
      //     y: 20

      //   })
      let nodeList = []
      this.nodeList.forEach((node, index) => {
        Shape.HTML.register({
          shape: 'node-' + index,
          html () {
            const div = document.createElement('div')
            div.innerHTML = `<div class="node-title">${node.name}</div><div class="node-img"> <img src="${node.img}" style="width:100%" alt=""></div>`
            div.className = 'node'
            return div
          }
        })
        nodeList[index] = graph.addNode({
          shape: 'node-' + index,
          x: node.x,
          y: node.y,
          event: 'node:click' // 每个节点绑定点击事件
        })
        // graph.centerContent()
      })
      graph.on('blank:click', ({ e, x, y, cell, view }) => {
        let text = document.getElementById('tooltipText')
        text.style.display = 'none'
      })
      graph.on('blank:mousemove', ({ e, x, y, cell, view }) => {
        let text = document.getElementById('tooltipText')
        text.style.display = 'none'
      })
      graph.on('cell:mousemove', ({ e, x, y, cell, view }) => {
        let text = document.getElementById('tooltipText')
        text.style.display = 'none'
      })
      // graph为自定义的画布 为画布上的node绑定点击事件
      graph.on('node:click', ({ view, e, node }) => {
        e.stopPropagation() // 禁止冒泡
        console.log(node) // 返回当前节点id等元素
        // 因为获取到的节点坐标是相对画布的本地坐标，但画布经过的缩放或者平移，需要将画布本地坐标转换为画布坐标，悬浮窗显示的位置才正确，不会杂乱
        const p1 = graph.localToGraph(node.store.data.position.x, node.store.data.position.y)
        // 鼠标进入开启悬浮窗
        let text = document.getElementById('tooltipText')
        text.innerHTML = '<div class="text"><span>IP地址：</span>218.77.58.130</div><div class="text"><span>上行速率：</span>1,000Mbps/s</div><div class="text"><span>下行速率：</span>1,000Mbps/s</div><div class="text"><span>上/下行限速：</span>1,000Mbps/s</div><div class="text"><span>链路总带宽：</span>1,000M</div><div class="text"><span>占用带宽：</span>15%</div>'
        text.style.display = 'block'
        text.style.left = (p1.x + 220).toString() + 'px'
        text.style.top = (p1.y).toString() + 'px'
      })

      Shape.HTML.register({
        shape: 'node-Internet',
        html () {
          const div = document.createElement('div')
          div.className = 'node-internet'
          div.innerHTML = `<img src="${imgInternet}" style="width:80px;height:60px">`
          return div
        }
      })
      let nodeInternet = graph.addNode({
        shape: 'node-Internet',
        x: (offsetWidth - 80) / 2,
        y: 790
      })

      let edges = [{
        source: {
          cell: nodeInternet,
          anchor: {
            name: 'top',
            args: {
              dx: 40,
              dy: 0
            }
          }
        },
        target: {
          cell: nodeList[0],
          anchor: {
            name: 'top',
            args: {
              dx: 100,
              dy: 240
            }
          }
        }
      }, {
        source: {
          cell: nodeInternet,
          anchor: {
            name: 'top',
            args: {
              dx: 0,
              dy: 30
            }
          }
        },
        target: {
          cell: nodeList[1],
          anchor: {
            name: 'right',
            args: {
              dx: 200,
              dy: 120
            }
          }
        }
      }, {
        source: {
          cell: nodeInternet,
          anchor: {
            name: 'top',
            args: {
              dx: 80,
              dy: 30
            }
          }
        },
        target: {
          cell: nodeList[2],
          anchor: {
            name: 'right',
            args: {
              dx: 0,
              dy: 120
            }
          }
        }
      }
      ]

      edges.forEach(e => {
        graph.addEdge({
          source: e.source,
          target: e.target,
          attrs: {
            line: {
              stroke: '#33317E',
              strokeWidth: 1,
              sourceMarker: '',
              targetMarker: ''
            }
          }
        })
      })

      graph.addEdge({
        source: {
          cell: nodeList[0],
          anchor: {
            name: 'top',
            args: {
              dx: 80,
              dy: 250
            }
          }
        },
        target: {
          cell: nodeList[1],
          anchor: {
            name: 'left',
            args: {
              dx: 210,
              dy: 100
            }
          }
        },
        labels: [{
          attrs: {
            label: {
              text: 'IPSEC VPN',
              fontSize: '16px'
            }
          },
          position: {
            distance: 0.5,
            angle: 0, // 旋转角度
            offset: {
              x: 0,
              y: -24
            }
          }
        }],
        attrs: {
          line: {
            stroke: '#33317E',
            strokeWidth: 3,
            sourceMarker: 'classic',
            targetMarker: 'classic'
          }
        }
      })
      graph.addEdge({
        source: {
          cell: nodeList[0],
          anchor: {
            name: 'top',
            args: {
              dx: 120,
              dy: 250
            }
          }
        },
        target: {
          cell: nodeList[2],
          anchor: {
            name: 'right',
            args: {
              dx: -10,
              dy: 100
            }
          }
        },
        labels: [{
          attrs: {
            label: {
              text: 'IPSEC VPN',
              fontSize: '16px'
            }
          },
          position: {
            distance: 0.5,
            angle: 0, // 旋转角度
            offset: {
              x: 0,
              y: -24
            }
          }
        }],
        attrs: {
          line: {
            stroke: '#33317E',
            strokeWidth: 3,
            sourceMarker: 'classic',
            targetMarker: 'classic'
          }
        }
      })
      graph.addEdge({
        source: {
          cell: nodeList[1],
          anchor: {
            name: 'top',
            args: {
              dx: 210,
              dy: 200
            }
          }
        },
        target: {
          cell: nodeList[2],
          anchor: {
            name: 'right',
            args: {
              dx: -10,
              dy: 200
            }
          }
        },
        labels: [{
          attrs: {
            label: {
              text: 'IPSEC VPN',
              fontSize: '16px'
            }
          },
          position: {
            distance: 0.5,
            angle: 0, // 旋转角度
            offset: {
              x: 0,
              y: 24
            }
          }
        }],
        attrs: {
          line: {
            stroke: '#33317E',
            strokeWidth: 3,
            sourceMarker: 'classic',
            targetMarker: 'classic'
          }
        }
      })
      graph.addEdge({
        source: {
          cell: nodeList[0],
          anchor: {
            name: 'top',
            args: {
              dx: 100,
              dy: 0
            }
          }
        },
        target: {
          cell: nodeList[3],
          anchor: {
            name: 'left',
            args: {
              dx: 100,
              dy: 240
            }
          }
        },
        labels: [{
          attrs: {
            label: {
              text: '政务外网',
              fontSize: '16px'
            }
          },
          position: {
            distance: 0.5,
            angle: 0, // 旋转角度
            offset: {
              x: 0,
              y: -24
            }
          }
        }],
        attrs: {
          line: {
            stroke: '#33317E',
            strokeWidth: 3,
            sourceMarker: 'classic',
            targetMarker: 'classic'
          }
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
.graph {
    width: 100%;
    height: calc(100vh - 200px);
    // background: #ffffff url(./images/bg_topology.svg) repeat center;
    border: 2px solid #33317e;
    border-radius: 8px;
    overflow: hidden;
}
.title {
    position: absolute;
    font-size: 20px;
    font-weight: 600;
    color: #33317e;
    top: 20px;
    left: 20px;
    z-index: 100;
}
</style>
